<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:user:region:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['system:user:region:remove']">删除</el-button>
            </el-col>
        </el-row>
        <el-table border v-loading="loading" :data="userRegions" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="ID" align="center" prop="id" />
            <el-table-column label="用户名称" align="center" prop="nickName" />
            <el-table-column label="省" align="center" prop="provinceName" />
            <el-table-column label="市" align="center" prop="cityName" />
            <el-table-column label="区" align="center" prop="countyName" />
            <el-table-column label="状态" align="center" key="enable">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.enable" @change="handleEnableChange(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:user:region:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />

        <!--添加或修改参数配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false"
            :before-close="handleClose">
            <!-- 增加地区管理表单   省市区选择-->

            <div class="content">
                <div class="label">区域：</div>
                <el-cascader ref="cascader" v-model="selectedOptions" :options="regionData" :props="props" collapse-tags
                    clearable></el-cascader>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { administrativeDivision } from '@/api/limitSale/index'
import { addUserRegion, allocatedRegionList, changeUserRegionEnable, delUserRegion } from '@/api/system/user'

export default {
    data() {
        return {
            ids: [], // 选中数组
            multiple: true, // 非多个禁用
            regionData: [],  //省市区数组
            selectedOptions: [],  //省市区选中数组
            loading: false,
            open: false,
            title: '',
            userRegions: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
              userId: undefined,
              pageNum: 1,
              pageSize: 10
            },
            props: {
                multiple: false,
                children: 'children',
                value: 'id',
                label: 'name',
                checkStrictly: true,
                emitPath: true
            },
        }
    },
    created() {
      const userId = this.$route.params && this.$route.params.userId;
      if (userId) {
        this.queryParams.userId = userId;
        this.getList();
      }

      administrativeDivision().then(res => {
          this.regionData = this.handleTree(res.data, 'id')[0].children
      })
    },
    methods: {
        // 获取列表信息
        getList() {
          allocatedRegionList(this.queryParams).then(response=>{
            this.userRegions = response.rows
            this.total = response.total;
            this.loading = false;
          })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.multiple = !selection.length
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除用户区域数据？').then(function () {
                return delUserRegion(ids)
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.open = true;
            this.title = "添加地区";
        },
        //确认表单按钮
        submitForm() {
            if (this.selectedOptions.length) {
              addUserRegion({
                userId: this.queryParams.userId,
                regionIds: [this.selectedOptions.join(',')]
              }).then(res=>{
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.selectedOptions = []
                this.getList();
              })
            } else {
                this.$modal.msgError("请选择区域");
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.selectedOptions = []
        },
        //关闭表单数据重置
        handleClose(done) {
            done()
            this.selectedOptions = []
        },
        handleEnableChange(row){
          let text = row.enable ? "启用" : "停用";
          this.$modal.confirm('确认要"' + text + '"此用户区域吗？').then(function () {
            return changeUserRegionEnable(row.id, row.enable);
          }).then(() => {
            this.$modal.msgSuccess(text + "成功");
          }).catch(function () {
            row.enable = !row.enable;
          });
        },
    }

}
</script>

<style lang="scss">
.content {
    display: flex;
    align-items: center;

    .label {
        width: 70px;
    }

    .cascader {
        flex: 1 !important;
    }


}
</style>
